<template>
  <div id="app">
    <el-tabs type="border-card" v-model="editableTabsValue"  @tab-remove="removeTab">

      <el-tab-pane label="菜谱管理" name="1">

        <el-table
          :data="catemenudata"
          style="width: 100%"
          :row-class-name="tableRowClassName">
          <el-table-column
            prop="name"
            label="美食名称"
            width="150">
          </el-table-column>
          <el-table-column
            prop="name"
            label="美食图片"
            width="180">
            <template slot-scope="scope">
              <el-image
                style="width: 10rem; height: 10rem"
                :src="`${publicPath}${scope.row.pic}`"
                ></el-image>
            </template>
          </el-table-column>
          <el-table-column
            prop="username"
            label="发表人"
            width="120">
          </el-table-column>
          <el-table-column
            prop="levelId"
            label="难度等级"
            width="170">
            <template slot-scope="scope">
              <el-rate
                v-model="scope.row.levelId"
                disabled
                show-score
                text-color="#ff9900"
                score-template="{value}">
              </el-rate>
            </template>
          </el-table-column>
          <el-table-column
            prop="tasteId"
            label="味道"
            width="170">
            <template slot-scope="scope">
              <el-rate
                v-model="scope.row.tasteId"
                disabled
                show-score
                text-color="#ff9900"
                score-template="{value}">
              </el-rate>
            </template>
          </el-table-column>
          <el-table-column
            prop="createdAt"
            label="创建时间"
            width="200">
          </el-table-column>
          <el-table-column
            label="操作">
            <template slot-scope="scope">
              <el-button @click="handleClick(scope.row)" type="text" size="small">查看</el-button>
              <el-button @click="handleClickdel(scope.row.id)" type="text" size="small">删除</el-button>
            </template>
          </el-table-column>
        </el-table>
        <el-pagination
          small
          :hide-on-single-page="true"
          @current-change="handleCurrentChange"
          layout="prev, pager, next"
          :total=pages
          :page-size=pager
          :current-page=page
          class="el-pagination">
        </el-pagination>
      </el-tab-pane>

      <el-tab-pane
        :key="item.name"
        v-for="(item, index) in editableTabs"
        :label="item.title"
        :name="item.name"
        :closable=true
      >

      <el-table
          :data="item.tabdata"
          style="width: 100%"
          :row-class-name="tableRowClassName">
          <el-table-column
            prop="stepnum"
            label=" "
            width="80">
          </el-table-column>
          <el-table-column
            prop="name"
            label="步骤图片"
            width="150">
            <template slot-scope="scope">
              <el-image
                style="width: 8rem; height: 8rem"
                :src="`${publicPath}${scope.row.pic}`"
                ></el-image>
            </template>
          </el-table-column>
          <el-table-column
            prop="description"
            label="步骤详情"
            width="250">
          </el-table-column>
          <el-table-column
            prop="createdAt"
            label="创建时间"
            width="200">
          </el-table-column>
          <el-table-column
            label="操作">
            <template slot-scope="scope">
              <el-button @click="handleClickiddel(scope.row.id)" type="text" size="small">删除</el-button>
            </template>
          </el-table-column>
        </el-table>

      </el-tab-pane>

    </el-tabs>
  </div>
</template>

<style>

  .el-table .warning-row {
    background: oldlace;
  }

  .el-pagination {
    text-align:center
  }

  .cell {
    text-align:center
  }

  .el-table .success-row {
    background: #f0f9eb;
  }

</style>

<script>
import axios from 'axios';

export default {
  data() {
    return {
      publicPath: process.env.BASE_URL,

      catemenudata: [],
      pages: 50,
      page: 1,
      pager: 4,
      
      publicPath: process.env.BASE_URL,

      editableTabs: [],
      editableTabsValue: '1',
      tabIndex: 2,
    }
  },

  created() {
    this.catemenu();
  },

  methods: {
    tableRowClassName({row, rowIndex}) {
      if (rowIndex%4 == 1) {
        return 'warning-row';
      } else if (rowIndex%4 == 3) {
        return 'success-row';
      }
      return '';
    },

    removeTab(targetName) {
      let tabs = this.editableTabs;
      let activeName = this.editableTabsValue;
      if (activeName === targetName) {
        tabs.forEach((tab, index) => {
          if (tab.name === targetName) {
            let nextTab = tabs[index + 1] || tabs[index - 1];
            if (nextTab) {
              activeName = nextTab.name;
            }
          }
        });
      }
      
      this.editableTabsValue = '1';
      this.editableTabs = tabs.filter(tab => tab.name !== targetName);
    },

    async handleClickdel(id) {
      let {data} = await axios({
        method: 'post',
        url: '/api/admin/step/del',
        data: {
          id
        }
      });

      if(data.code){
        this.$message.error(data.message);
      }else{
        this.catemenu();
        this.$message({
          message: data.message,
          type: 'success'
        });
      }
    },

    async handleClick(val) {
      let newTabName = ++this.tabIndex + '';
      let {data} = await axios({
        method: 'get',
        url: '/api/admin/step/id',
        params: {
          id: val.id
        }
      });
      let tabdata;
      this.editableTabs.push({
        title: '查看评论信息',
        name: newTabName,
        tabdata:data.data
      });
      this.editableTabsValue = newTabName;
    },

    handleCurrentChange(val) {
      this.comment(val);
    },

    async catemenu(page) {
      this.page = page;
      let {data} = await axios({
        method: 'get',
        url: '/api/admin/step',
        params: {
          page
        }
      });
      
      this.pages = data.preoage;
      this.catemenudata = data.data;
    },

    async handleClickiddel(id) {
      let {data} = await axios({
        method: 'post',
        url: '/api/admin/step/id/del',
        data: {
          id
        }
      });
      if(data.code){
        this.$message.error(data.message);
      }else{
        this.editableTabs[0].tabdata = this.editableTabs[0].tabdata.filter( item => {
          if(item.id != id){
            return item;
          }
        } );
        this.$message({
          message: data.message,
          type: 'success'
        });
      }
    }

  }

}
</script>